<template>
  <el-container class="all">
    <el-header class="topbar">
      <el-space spacer="|">
        <img src="./assets/logo.png" style="width: 50px; height: 50px;">
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
        <router-link to="/login">Login</router-link>
        <!--
        <router-link to="/register">Register</router-link>
        -->
        
      </el-space>   
    </el-header>

    
    <el-container>
      <el-aside class="sidebar" width="collapse" style="color: blueviolet;">
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Money /></el-icon>
              <span>My Bills</span>
            </template>
            <el-menu-item-group>
              <template #title><span>Group One</span></template>
              <el-menu-item index="../user/bills">My Bills</el-menu-item>
              <el-menu-item index="../user/records">Recharge Records</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title><span>item four</span></template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="../user/announce">
            <el-icon><Document/></el-icon>
            <template #title>Announcements</template>
          </el-menu-item>
          <el-menu-item index="../admin/manage" v-if="isAdmin">
            <el-icon><Management/></el-icon>
            <template #title>Administration</template>
          </el-menu-item>
          <el-menu-item index="../user/info">
              <el-icon><House /></el-icon> 
              <template #title>About Me</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header id="greeting">
          <div class="collapse-btn" @click="collapseNav">
            <el-icon size="30px">
              <Fold />
            </el-icon>
          </div>
          Welcome!!
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { inject, ref } from 'vue'
export default {
  name: 'App',
  components: {
    HelloWorld,Document,IconMenu,Location,
    Setting,House,Fold,Money,Wallet,Management,
    Notification
  },
  data(){
    return{
      isCollapse,
      collapseNav,
      isAdmin
    }
  },
}

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Fold,
  Money,
  Wallet,
  Management,
  Notification
} from '@element-plus/icons-vue'
const isCollapse = ref(true);
const collapseNav = () =>{
  isCollapse.value = !isCollapse.value;
}
const isAdmin = ref(false);
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
  padding: 0px;
}
.topbar{
  padding: 0px;
  margin: 0px;
  background-color: darkorchid;
  /*widows: 500px;*/
}
.all{
  margin: 0px;
  padding: 0px;
  position: relative;
  /*background-color: khaki;   */
}
a{
  color: white;
  text-decoration: none;
}
.router-link-active{
  color:gold;
  text-decoration: underline;
}
#greeting{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.el-aside{
  background-color: aquamarine;
  height: 450px;
}
.el-main{
  background-color: white;
  height: auto;
  float: right;
}
.el-footer{
  background-color: azure;
  font-size: smaller;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.collapse-btn{
  width: 40px;
  height: 30px;
  padding: 0;
  margin: 0;
  background-color: white;
  border-color: black;
  border: solid;
  border-width: 1px;
}
</style>
